keys.reverse().forEach((key) => { FoodColumns[key] = null; });
const ignoredFoodWeightColumns = ['foodId', 'sciName', 'manufacturerName', 'costG', 'budgetId', 'category', 'usdaFoodGroupDesc', 'dry', 'meat', 'preChop', 'preBag', 'active'];
const renamedFoodWeightColumns = {
ohdzName: 'Nickname',
food: 'Food name',
};
this.preppedFoodColumns = TableColumnHelper([FoodColumns], ignoredFoodWeightColumns, renamedFoodWeightColumns);
this.clientFoodAPI = new FoodAPI(this.props.token);
this.notificationBar = React.createRef();
}
handleNickNameChange = (rowData) => {
this.setState({ editDialogOpen: true, dialogRow: { ...rowData } });
}
async handleDialogSave() {
if (!this.state.dialogRow.ohdzName) {
this.notificationBar.showNotification('error', 'nickname must be present.');
return;
}
const updates = { ohdzName: this.state.dialogRow.ohdzName };
const id = this.state.dialogRow.foodId;
const res = await this.clientFoodAPI.updateFood(id, updates);
if (res.data) {
this.setState((prevState) => {
const newFoodData = [...prevState.allFood.map((item) => {
if (item.foodId !== res.data.foodId) {
return item;
}
const updatedRow = item;
Object.assign(updatedRow, res.data);
return updatedRow;
})];
return {
allFood: newFoodData,
editDialogOpen: false,
dialogRow: {},
dirty: false,
};
});
}
}
handleCancelDialog() {
this.setState({ editDialogOpen: false, dialogRow: {}, dirty: false });
}
render() {
const { role } = this.props.account;
return (
<div>
{this.state.editDialogOpen &&
<Dialog
key="editDialog"
open={this.state.editDialogOpen}
onClose={this.handleClose}
aria-labelledby="form-dialog-title"
fullWidth
>
<DialogTitle id="form-dialog-title">Edit Food Nickname</DialogTitle>
<DialogContent>
<TextField
id="nickname"
label="Nickname"
value={this.state.dialogRow.ohdzName}
onChange={(evt) => { const newVal = evt.target.value; this.setState((prevState) => ({ dialogRow: { ...prevState.dialogRow, ohdzName: newVal }, dirty: true })); }}
margin="normal"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleCancelDialog()} color="primary">
Cancel
</Button>
<Button disabled={!this.state.dirty} onClick={() => this.handleDialogSave()} color="primary">
Save
</Button>
</DialogActions>
</Dialog>
}
<MaterialTable
title="Food Nicknames"
data={this.state.allFood}
columns={this.preppedFoodColumns}
options={{
pageSize: 10,
actionsColumnIndex: 0,
emptyRowsWhenPaging: false,
}}
actions={[
(rowData) => ({
icon: () => <Edit />,
onClick: () => this.handleNickNameChange(rowData),
tooltip: 'Edit Nickname',
disabled: !hasAccess(role, Food.nicknames.roles),
}),
]}
/>
<Notifications
ref={this.notificationBar}
/>
</div>
);
}
}